<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="div1">
    <ul>
      <li v-for='item in employees'>{{item}}</li>
    </ul>
    <div>
      <div>{{msgObj.name}}</div>
      <div>{{msgObj.age}}</div>
      <div>{{msgObj.gender}}</div>
      <div>{{msgObj.aaa}}</div>
    </div>
  </div>
  
  <script type="text/javascript">
    /*
      动态处理响应式数据
      
    */
    const vueObj = new Vue({
      el: '#div1',
      data: {
        employees: ['zs','lisi','wangwu'],
        msgObj: {
          name: 'lisi',
          age: 12
        }
      },
    });

    // 动态修改属性
    vueObj.$set(vueObj.msgObj,'name','haha');    //属性存在，会被修改
    vueObj.$set(vueObj.msgObj,'gender','female');  //属性不存在，会被添加
    vueObj.msgObj.aaa = 'aaa';

    //动态修改数组
    vueObj.employees[0] = 'zhangsan';    //局部的vue的实例
    Vue.set(vueObj.employees,1,'lisi_water');   //全局的vue的实例
    vueObj.$set(vueObj.employees,2,'wangwu_water');
    
    
  </script>
</body>
</html>
